<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>两列布局</title>
		<link rel="stylesheet" href="css/reset-min.css">
		<style type="text/css">
			.clearfix:before,.clearfix:after{
				content: "";
				display: table;
				clear: both;
			}
			.clearfix{
				zoom: 1;
			}
			
			.wrap{
				width: 300px;
				border: 1px solid;
				margin: 0 auto;
			}
			.left{
				width: 50px;
				height: 50px;
				background: url(img/default-header.png) no-repeat -60px -150px;
				float: left;
			}
			.desc{
				padding-left: 10px;
				/* 下面三个属性结合，使文字一行显示不下，末尾省略号 */
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				/* display: block这是隐含的属性组合，必须是块级元素，结合上面三个属性才可以使文字一行显示不下，末尾省略号 */
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="wrap clearfix">
			<div class="left"></div>
			<div class="desc">
				此商品大甩卖，大甩卖大甩卖大甩卖大甩卖大甩卖<br>
				此商品大甩卖<br>
				此商品大甩卖<br>
				此商品大甩卖<br>
			</div>
		</div>
	</body>
</html>
